<template>
    <div>
        <el-dialog
            title="新增员工"
            :visible.sync="dialogVisible"
            width="880px"
        >
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <el-form-item label="用户名:" prop="username" >
                    <el-input :autofocus="true" v-model="form.username" :disabled="true" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input :autofocus="true" v-model="form.password" placeholder="如不输入则默认原密码"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名:" prop="realname"
                              :rules="[{required: true, message: '请输入真实姓名', trigger: 'blur'}]">
                    <el-input :autofocus="true" v-model="form.realname" placeholder="请输入真实姓名"></el-input>
                </el-form-item>
                <el-form-item label="昵称:" prop="nickname">
                    <el-input :autofocus="true" v-model="form.nickname" placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:" prop="email">
                    <el-input :autofocus="true" v-model="form.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel" size="small">取 消</el-button>
                <el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {mapState} from "vuex";
import {upDateStaffManage} from "@/index/api/index/setting/staffManage/index"

export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                username: "",
                password: "",
                realname: "",
                nickname: "",
                email: "",
            },
        }
    },
    computed: {
        ...mapState(["token"]),
    },
    methods: {
        bindBody(e) {
            this.form.content = e
        },
        cancel() {
            this.dialogVisible = false;
        },
        showDialog(e, row) {
            this.form = row
            this.dialogVisible = !this.dialogVisible
        },
        onSubmit() {
            upDateStaffManage(this.form,this.form.id).then(res => {
                if (res.code == 200) {
                    this.dialogVisible = false;
                    this.$message({
                        message: res.message,
                        type: "success",
                    });
                    this.$parent.getFarmList();
                } else {
                    this.$message({
                        message: res.message,
                        type: "error",
                    });
                }
            })
        },

    }
}
</script>

<style lang="less" scoped>

.flex-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-top: 10px;
}
</style>
